<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>火灾演练</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console2.css') }}"/>
</head>
{#style="text-align: center;"#}
<body class="pear-container">
<style>
    /* 滚动表格最外层 */
    .tableoOut {
        margin: 1px auto;
        width: 100%;
        height: 230px;
        background: rgb(245, 245, 245);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .tableBox {
        margin: 1px auto;
        width: 100%;
        background: rgb(65, 101, 219);
        overflow: hidden
    }

    .tableTit {
        background: rgb(65, 101, 219);
        width: 100%;
        height: 70px;
        color: #858A84;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tableInner {
        height: auto;
    }

    .box {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
    }

    .box .time {
        color: #858A84;
    }

    .tableoOut .addr, .tableoOut .time, .tableoOut .name {
        box-sizing: border-box;
        padding: 0 5px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .tableoOut .addr {
        width: calc(100% - 200px);
        flex-shrink: 0;
    }

    .tableoOut .name, .tableoOut .time {
        width: 100px;
        flex-shrink: 0;
    }

    ul {
        float: top;
    }

    ul li {
        color: #5e5e5e;
        width: 25%;
        height: 40px;
        font-size: 16px;
        float: left;
    }

    tr {
        list-style-type: none;
    }

    img {
        border: none;
        max-width: 100%;
    }

    .map4 {
        width: 100%;
        height: 4.3rem;
        position: relative;
        left: -50%;
        top: 2%;
        margin-top: .2rem;
        z-index: 5;
    }

    .map1, .map2, .map3 {
        position: absolute;
    }

    .map1 {
        width: 35%;
        z-index: 2;
        top: 36.8%;
        left: 32.5%;
        animation: myfirst2 15s infinite linear;
    }

    .map2 {
        width: 33%;
        top: 38.5%;
        left: 33.5%;
        z-index: 3;
        opacity: 0.2;
        animation: myfirst 10s infinite linear;
    }

    .map3 {
        width: 30%;
        top: 40%;
        left: 35%;
        z-index: 1;
    }

    @keyframes myfirst2 {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(359deg);
        }
    }

    @keyframes myfirst {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(-359deg);
        }
    }
</style>
{#background: url('/static/images/bgImage.png');#}
<div class="layui-card-body"
     style="overflow: hidden;background: url('/static/images/bgImage.png');height: auto;width: auto">
    <div class="layui-card-body ruleBg" style="float: left;margin-top: 20px">
        <a href=""
           style="float: left;text-decoration:underline;color: white;font-size: 15px;font-weight:bold ">规则11</a>
        <a href="" style="margin-left: 10px;text-decoration:underline;color: white;font-size: 15px;font-weight:bold ">规则12</a>
    </div>
    <div class="layui-card-body stopBg" style="float: right;margin-top: 20px">
        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="pauseBtn">停 止</button>
    </div>
    <div class="header"
         style="text-align: center; background: url('/static/images/first_title.png') no-repeat;height: 70px;width: 500px;margin-top: 10px;background-size: 100% 100%;margin: auto">
        <p style="text-align: center;font-size: 30px;color: white;padding-top:20px;font-weight: bold">火灾模拟监测</p>
    </div>
    <div class="layui-card-body"
         style="margin-top: 10px;width: 100%;height: 100%;border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box">
        <div class="layui-card"
             style="float: left; width: 30%;margin-top: 10px;margin-left: 10px;background-color: rgba(255,255,255,0%);border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box">
            <div class="layui-card-header" style="color: white">实时训练人员数据</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line">
                    <tbody>
                    <tr>
                        <th>属性</th>
                        <th>值</th>
                    </tr>
                    <tr>
                        {#                        {{ user_name }}#}
                        <td>作训警员</td>
                        <td>{{ report_detail.name }}</td>
                    </tr>
                    <tr>
                        {#                       {{ user_id }}#}
                        <td>警员编号</td>
                        <td>{{ report_detail.police_id }}</td>
                    </tr>
                    <tr>

                        <td>作训情景</td>
                        <td>火灾模拟</td>
                    </tr>
                    <tr>
                        {#                        {{ training_time }}#}
                        <td>训练开始时间</td>
                        <td>{{ report_detail.create_time }}</td>
                    </tr>

                    </tbody>

                </table>
            </div>
        </div>
        <div class="layui-card"
             style="background-color: rgba(255,255,255,0%);float: revert;width: 30%;margin-top: 10px;margin-left: 34%;border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box;height: 100px">
            <div style="height:40px;width:90%;margin-left:5%;background:rgba(255,255,255,0%)">
                <p style="height: 100%;width: 100%;color: #FFFFFF;font-weight: bold;font-size:20px;text-align: center">
                    应急预案</p>
            </div>
            <div class="layui-carousel" id="test1" style="height:70px;width: 80%;color: #565c70">
                <div carousel-item style="background: #2e6da4;height: 50px;text-align: center">
                    <div>发生监狱火灾事件，环境监测报警，并同时派监狱武警打开门禁与录像设备，进行人员疏散和管理</div>
                    <div>进行先期处置和信息研判</div>
                    <div>向监狱领导报告该事件发展情况</div>
                    <div>应急联动平台应与预案管理子系统接口获取预案并启动预案</div>
                    <div>
                        根据应急预案通过声光报警通知监狱相关部门、驻监武警中队、当地消防部门前去现场增援，根据现场情况调动资源
                    </div>
                    <div>启动视频进行事发现场情况拍录</div>
                    <div>应急响应结束，汇总事故信息</div>
                    <div>调查和评估；重建；事故总结；归档</div>
                </div>
            </div>
        </div>
        <div class="layui-card"
             style="background-color: rgba(255,255,255,0%);float: right;width: 30%;margin-top: 10px;margin-right: 10px;border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box">
            <div class="layui-card-header" style="color: white">实时火灾情况数据</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line" id="1111">
                    <tbody>
                    <tr>
                        <th>属性</th>
                        <th>值</th>
                    </tr>

                    <tr>
                        <td>火势大小</td>
                        {#                        {{ user_name }}#}
                        <td id="fire_size">{{ report_detail.fireDegree }}</td>
                    </tr>
                    <tr>
                        <td>火势范围</td>
                        <td id="fire_range">{{ report_detail.fireRange }}</td>
                    </tr>
                    <tr>
                        <td>火灾需疏散人数</td>
                        <td id="evacuat_num_show">{{ report_detail.evacuat_num }}</td>
                    </tr>
                    <tr>
                        <td>已疏散人数</td>
                        <td id="has_evacuat_num_show">4人</td>
                    </tr>
                    <tr>
                        <td>火场风速控制</td>
                        <td id="wind_size">{{ report_detail.windSpeed }}次/分钟</td>
                    </tr>
                    <tr>
                        <td>是否有高楼</td>
                        <td id="build_exist">{{ report_detail.haveBuild }}</td>
                    </tr>
                    <tr>
                        <td>火场温度控制</td>
                        <td id="temp_control">{{ report_detail.tempControl }}℃</td>
                    </tr>
                    <tr>
                        <td>决策者数量</td>
                        <td id="decision_maker_num_show">{{ report_detail.decision_maker_num }}人</td>
                    </tr>
                    <tr>
                        <td>方案数量</td>
                        <td id="scheme_num_show">{{ report_detail.scheme_num }}种</td>
                    </tr>
                    <tr>
                        <td>高认可度决策者比例</td>
                        <td id="recognition_ratio_show">{{ report_detail.recognition_ratio }}%</td>
                    </tr>
                    </tbody>

                </table>
            </div>
        </div>
        <div class="layui-card"
             style="float: left; width: 30%;height:435px;margin-top: 38%;margin-left: -30%;background-color: rgba(255,255,255,0%);border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box">
            <div style="float:left">
                <div style="background:url(/static/images/cheng1.png);width: 80px;height: 80px;margin-top: 10px;margin-left: 2px">
                    <p id="alien_person"
                       style="color: white;font-weight: bold;font-size: 20px;transform: translate(0px,27px);text-align: center">
                        47</p>
                </div>
                <p style="color: rgb(229,163,59);font-weight: bold;font-size: 16px;margin-top: 10px;margin-left: 10px; text-align: center">
                    外来人员</p>
            </div>
            <div style="float:left">
                <div style="background:url(/static/images/lan1.png);width: 80px;height: 80px;margin-top: 10px;margin-left: 2px">
                    <p id="alien_car"
                       style="color: white;font-weight: bold;font-size: 20px;transform: translate(0px,27px);text-align: center">
                        25</p>
                </div>
                <p style="color: rgb(69,137,235);font-weight: bold;font-size: 16px;margin-top: 10px;margin-left: 10px; text-align: center">
                    外来车辆</p>
            </div>
            <div style="float:left">
                <div style="background:url(/static/images/lv1.png);width: 80px;height: 80px;margin-top: 10px;margin-left: 2px">
                    <p id="today_warning"
                       style="color: white;font-weight: bold;font-size: 20px;transform: translate(0px,27px);text-align: center">
                        45</p>
                </div>
                <p style="color: rgb(27,149,162);font-weight: bold;font-size: 16px;margin-top: 10px;margin-left: 10px;text-align: center">
                    今日预警</p>
            </div>
            <div style="float:left">
                <div style="background:url(/static/images/zi1.png);width: 80px;height: 80px;margin-top: 10px;margin-left: 2px">
                    <p id="today_inspection"
                       style="color: white;font-weight: bold;font-size: 20px;transform: translate(0px,27px);text-align: center">
                        38</p>
                </div>
                <p style="color: rgb(139,116,245);font-weight: bold;font-size: 16px;margin-top: 10px;margin-left: 10px; text-align: center">
                    今日巡查</p>

            </div>
            <div class="layui-col-md4" style="width: 100%;margin-top: 25px">
                <div class="layui-card">
                    <div class="layui-card-header">操作失误提示</div>
                </div>
            </div>
            <div id="app" style="margin-top: 15%">
                <div class="tableoOut" ref="tableoOut">
                    <div class="tableTit">
                        <div class="name">操作</div>
                        <div class="addr">失误</div>
                        <div class="time">时间</div>
                    </div>
                    <div class="tableBox" ref="tableBox"
                         :style="{height: tableHei}">
                        <div class="tableInner" ref="tableInner">
                            <div class="box" v-for="item in 7" :key="item">
                                <div class="name">灭火失误</div>
                                <div class="addr">山东省山东省山东省山东省山东省山东省山东省山东省
                                    山东省山东省山东省山东省山东省
                                </div>
                                <div class="time">2022-05-26</div>
                            </div>
                        </div>
                        <div class="tableInner" v-if="size < 7">
                            <div class="box" v-for="item in 7" :key="item">
                                <div class="name">疏散人群失误</div>
                                <div class="addr">山东省山东省山东省山东省山东省山东省山东省山东省
                                    山东省山东省山东省山东省山东省
                                </div>
                                <div class="time">2022-05-26</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        {#     <div class="layui-card" style="float: left; width: 30%;height:130px;margin-top: 64%;margin-left: -30%;background-color: rgba(255,255,255,0%);border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box">#}
        {##}
        {#     </div>#}
        <div class="map" style="text-align: center; margin-top: 70%">
            <div class="map1"><img src="/static/images/lbx.png"></div>
            <div class="map2"><img src="/static/images/jt.png"></div>
            <div class="map3"><img src="/static/images/map.png"></div>
            <p style="width: 100%;margin-bottom:6%;text-align: center; color: white;font-weight: bold;font-size:50px">
                训练中...</p>

        </div>
    </div>
    {# 实时人数#}
    <div class="layui-card-body"
         style="margin-top: 10px;width: 100%;height:630px;border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box">
        <div class="layui-card-header" style="font-weight: bold;font-size: 22px;color: white">罪犯动态</div>
        <div class="layui-card-body">
            {#            信息填充#}
            <div>
                <ul>
                    <li style="color: white">在线：100人</li>
                    <li style="color: white">在蹲：111人</li>
                    <li style="color: white">关押：2011人</li>
                    <li style="color: white">重点犯：96人</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li style="color: white">帮予监外执行：19人</li>
                    <li style="color: white">出监就诊：22人</li>
                    <li style="color: white">监外住院：16人</li>
                    <li style="color: white">看不清：12人</li>
                </ul>
            </div>
            <div class="layui-card" style="margin-top: 100px">
                <div class="layui-card-header">各个监所罪犯数据直方图</div>
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-records1" style="background-color:#ffffff;min-height:380px;"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="layui-card-body"
         style="float: left;margin-top: 15px;width: 60%;height: 100%;border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box">
        <div class="layui-col-md12" style="margin: 2%;width: 96%">
            <div class="layui-card">
                <div class="layui-card-header">体征数据实时折线图</div>
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-records" style="background-color:#ffffff;min-height:400px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {#  火势控制按钮#}
    <div class="layui-card"
         style="float: right;margin-top: 15px;height: 100%;border-radius: 10px;border:  1px #0174f5 solid;padding: 3px;box-sizing: border-box;background-color: rgba(255,255,255,0%)">
        <div class="layui-card-header">火灾模拟控制</div>
        <div class="layui-card-body">
            <table class="layui-table" lay-skin="line">
                <tbody>
                <th>属性</th>
                <th>操作</th>

                <tr>
                    <td>火势大小</td>
                    {#                        {{ user_name }}#}
                    <td>
                        <div id="fireDegree" style="width: 100%"></div>
                    </td>
                </tr>
                <tr>
                    <td>火势范围</td>
                    <td>
                        <div id="fireRange" style="width: 100%"></div>
                    </td>
                </tr>
                <tr>
                    <td>火灾需疏散人数</td>
                    <td><input id="evacuat_num" type="text" name="evacuat_num" placeholder="0" autocomplete="off"
                               style="width: 80px" class="layui-input"></td>
                </tr>
                <tr>
                    <td>火场风速控制</td>
                    <td>
                        <div id="windSpeed" style="width: 100%"></div>
                    </td>
                </tr>
                <tr>
                    <td>是否加入高楼</td>
                    <td>
                        <form class="layui-form layui-form-pane" action="" style="margin-top: auto">
                            <input type="checkbox" lay-filter="switchChose" name="zzz" lay-skin="switch"
                                   lay-text="加入|取消">
                        </form>
                    </td>
                </tr>
                <tr>
                    <td>火场温度控制</td>
                    <td>
                        <div id="tempControl" style="width: 100%"></div>
                    </td>
                </tr>
                <tr>
                    <td>决策者数量</td>
                    <td><input id="decision_maker_num" type="text" name="decision_maker_num" placeholder="0"
                               autocomplete="off" style="width: 80px" class="layui-input"></td>
                </tr>
                <tr>
                    <td>方案数量</td>
                    <td><input id="scheme_num" type="text" name="scheme_num" placeholder="0" autocomplete="off"
                               style="width: 80px" class="layui-input"></td>
                </tr>
                <tr>
                    <td>高认可度决策者比例</td>
                    <td><input id="recognition_ratio" type="text" name="recognition_ratio" placeholder="0"
                               autocomplete="off" style="width: 80px" class="layui-input"></td>
                </tr>

                </tbody>

            </table>
            <button type="button" class="layui-btn layui-btn-fluid layui-btn-normal" id="completeBtn">确 定</button>
        </div>
    </div>
</div>
{% include 'admin/common/footer.html' %}
<script src="/static/idata/js/jquery-3.3.1.min.js"></script>
<script src="{{ url_for('static', filename='/admin/component/layui/layui.js') }}"></script>
<script src="{{ url_for('static', filename='/admin/component/pear/pear.js') }}"></script>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script src="/static/build/layui.js"></script>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
<script>

    function updateData() {
        var data = [10, 20, 30, 40];
        for (var i = 0; i < data.length; i++) {
            data[i] = Math.floor(Math.random() * 100);
        }
        drawBarChart(data);
    }

    function drawBarChart(data) {
        if (data.length > 0) {
            $('#alien_person').text(data[0]);
            $('#alien_car').text(data[1]);
            $('#today_warning').text(data[2]);
            $('#today_inspection').text(data[3]);
        }
    }

    setInterval(updateData, 1000);
    layui.use(['layer', 'slider', 'form', 'carousel', 'jquery', 'echarts', 'popup'], function () {
        var $ = layui.jquery;
        echarts = layui.echarts;
        let popup = layui.popup;

        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , height: '45%'
            , arrow: 'none' //始终显示箭头
            , anim: 'updown' //切换动画方式
            , autoplay: 'always'
            , indicator: 'none'
        });

        var fire_slider = layui.slider;//火灾大小控制
        var wind_slider = layui.slider;//风速控制
        var temp_slider = layui.slider;//温度控制
        var range_slider = layui.slider;//火势范围
        var check_click = layui.form;
        var build_exist = '否', fire_size = '0', wind_size = '0', temp_control = '0', fire_range = '0';
        let reg = new RegExp(/^\d+$/);
        check_click.on('switch(switchChose)', function (data) {
            let x = data.elem.checked;//判断开关状态
            if (x == true) {
                {#$('#build_exist').text('是');#}
                build_exist = '是';
            } else {
                build_exist = '否';
            }
        })
        //渲染
        fire_slider.render({
            elem: '#fireDegree'  //绑定元素
            , change: function (value) {
                fire_size = value;
            }
        });
        wind_slider.render({
            elem: '#windSpeed'  //绑定元素
            , change: function (value) {

                wind_size = value;
            }
        });
        temp_slider.render({
            elem: '#tempControl'  //绑定元素
            , change: function (value) {
                temp_control = value;
            }
        });
        range_slider.render({
            elem: '#fireRange'  //火势范围
            , change: function (value) {
                fire_range = value;
            }
        });
        let evacuat_num_input = document.getElementById("evacuat_num");
        let decision_maker_num_input = document.getElementById("decision_maker_num");
        let scheme_num_input = document.getElementById("scheme_num");
        let recognition_ratio_input = document.getElementById("recognition_ratio");
        //确认按钮的点击事件
        $(document).on('click', "#completeBtn", function () {

            if ((!reg.test(evacuat_num_input.value)) || (!reg.test(decision_maker_num_input.value)) ||
                (!reg.test(scheme_num_input.value)) ||
                (!reg.test(recognition_ratio_input.value))) {
                alert("输入不规范,请输入默认值0");
                return false;
            } else {

                $('#evacuat_num_show').text(evacuat_num_input.value + '人');
                $('#decision_maker_num_show').text(decision_maker_num_input.value + '人');
                $('#scheme_num_show').text(scheme_num_input.value + '种');
                $('#recognition_ratio_show').text(recognition_ratio_input.value + '%')
                $('#fire_size').text(fire_size);
                $('#wind_size').text(wind_size + '次/分钟');
                $('#temp_control').text(temp_control + '℃');
                $('#fire_range').text(fire_range);
                $('#build_exist').text(build_exist);
                alert("设置成功")
            }

        })
        $(document).on('click', "#pauseBtn", function () {
            let data = {
                evacuat_num: parseInt(evacuat_num_input.value, 10),
                decision_maker_num: parseInt(decision_maker_num_input.value, 10),
                scheme_num: parseInt(scheme_num_input.value, 10),
                recognition_ratio: parseInt(recognition_ratio_input.value, 10),
                fire_size: parseInt(fire_size, 10),
                wind_size: parseInt(wind_size, 10),
                temp_control: parseInt(temp_control, 10),
                fire_range: parseInt(fire_range, 10),
                build_exist: build_exist,
                id:{{report_detail.id}}
            }

            layer.open({
                content: '是否生成训练报告'
                , btn: ['确 定']
                , yes: function () {
                    $.ajax({
                        url: '/admin/screen/training/report_detail_updateData',
                        data: JSON.stringify(data),
                        dataType: 'json',
                        contentType: 'application/json',
                        type: 'post',
                        success: function (result) {
                            if (result.success) {
                                layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                                    layer.open({
                                        type: 2,
                                        title: '展示详情',
                                        shade: 0.1,
                                        area: ['100%', '100%'],
                                        content: '/admin/screen/training/report_detail/' + {{report_detail.id}}
                                    })
                                })
                            } else {
                                layer.msg(result.msg, {icon: 2, time: 1000})
                            }
                        }
                    })

                }, cancel: function () {//右上角关闭回调
                }
            });

        })

        //折线
        let bgColor = "#fff";
        let color = [
            "#0090FF",
            "#36CE9E",
            "#FFC005",
            "#FF515A",
            "#8B5CFF",
            "#00CA69"
        ];
        let echartData = [
            {
                name: "{{time_now}}",
                Blood_oxy: {{ Blood_oxygen }},
                blood_pre: {{ blood_pressure }},
                Respiratoryrate: {{ Respiratory_rate }},
                heartrate: {{ heart_rate }},
                tem: {{ temperature }}

            },
        ];

        var xAxisData = echartData.map(v => v.name);
        //  ["1", "2", "3", "4", "5", "6", "7", "8"]
        var yAxisData1 = echartData.map(v => v.Blood_oxy);
        // [100, 138, 350, 173, 180, 150, 180, 230]
        var yAxisData2 = echartData.map(v => v.blood_pre);
        // [233, 233, 200, 180, 199, 233, 210, 180]
        var yAxisData3 = echartData.map(v => v.Respiratoryrate);
        var yAxisData4 = echartData.map(v => v.heartrate);
        var yAxisData5 = echartData.map(v => v.tem);

        const hexToRgba = (hex, opacity) => {
            let rgbaColor = "";
            let reg = /^#[\da-f]{6}$/i;
            if (reg.test(hex)) {
                rgbaColor =
                    `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                        "0x" + hex.slice(3, 5)
                    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
            }
            return rgbaColor;
        }

        option = {
            backgroundColor: bgColor,
            color: color,
            legend: {
                right: 10,
                top: 10
            },
            tooltip: {
                trigger: "axis",
                formatter: function (params) {
                    let html = '';
                    params.forEach(v => {
                        html +=
                            `<div style="color: #666;font-size: 14px;line-height: 24px">
					                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
					                ${v.seriesName}.${v.name}
					                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
					                `;
                    })


                    return html
                },
                extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                axisPointer: {
                    type: 'shadow',
                    shadowStyle: {
                        color: '#ffffff',
                        shadowColor: 'rgba(225,225,225,1)',
                        shadowBlur: 5
                    }
                }
            },
            grid: {
                <!--                top: 30,-->
                left: 0,
                <!--                width:80%,-->

                containLabel: true
            },
            xAxis: [{
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: "#333"
                    }
                },
                axisLine: {
                    margin: 3,
                    lineStyle: {
                        color: "#D9D9D9"
                    }
                },
                data: xAxisData
            }],
            yAxis: [

            {
              type: 'value',
              name: '血压',
              min:90,
              max:140,
              position: 'left',
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: color[1]
                }
              },
              axisLabel: {
                formatter: '{value}mmHg'
              }
            },
            {
              type: 'value',
              name: '血氧',
              min:94,
              max:100,
              position: 'left',
              offset: -50,
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: color[0]
                }
              },
              axisLabel: {
                formatter: '{value}%'
              }
            },
            {
              type: 'value',
              name: '呼吸频率',
              min:16,
              max:30,
              position: 'left',
              offset: -100,
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: color[2]
                }
              },
              axisLabel: {
                formatter: '{value}次/分'
              }
            },
            {
              type: 'value',
              name: '心率',
              min:50,
              max:90,
              position: 'right',
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: color[3]
                }
              },
              axisLabel: {
                formatter: '{value}次/分'
              }
            },
            {
              type: 'value',
              name: '体温',
              min:36,
              max:37.2,
              position: 'right',
              offset: 50,
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: color[4]
                }
              },
              axisLabel: {
                formatter: '{value}度'
              }
            }
            ],
            series: [{
                name: "血氧",
                type: "line",
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[0],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[0], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: hexToRgba(color[0], 0.3)
                            },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[0], 0.1)
                                }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[0], 0.1),
                        shadowBlur: 10
                    }
                },
                yAxisIndex: 1,
                data: yAxisData1
            },
            {
                name: '血压',
                type: "line",
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[1],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[1], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: hexToRgba(color[1], 0.3)
                            },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[1], 0.1)
                                }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[1], 0.1),
                        shadowBlur: 10
                    }
                },
                yAxisIndex: 0,
                data: yAxisData2
            },
            {
                name: '呼吸频率',
                type: "line",
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[2],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[2], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: hexToRgba(color[2], 0.3)
                            },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[2], 0.1)
                                }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[2], 0.1),
                        shadowBlur: 10
                    }
                },
                yAxisIndex: 2,
                data: yAxisData3
            },
            {
                name: '心率',
                type: "line",
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[3],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[3], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: hexToRgba(color[3], 0.3)
                            },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[3], 0.1)
                                }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[3], 0.1),
                        shadowBlur: 10
                    }
                },
                yAxisIndex: 3,
                data: yAxisData4
            },
            {
                name: '体温',
                type: "line",
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[4],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[4], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: hexToRgba(color[4], 0.3)
                            },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[4], 0.1)
                                }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[4], 0.1),
                        shadowBlur: 10
                    }
                },
                yAxisIndex: 4,
                data: yAxisData5
            }
            ]
        };

        echartsRecords.setOption(option);

        window.onresize = function () {
            echartsRecords.resize();
        };

        setInterval(ajaxPolling, 1000 * 2);

        function ajaxPolling() {
            $.ajax({
                url: "/admin/scene_realtime/polling2",
                success: function (data) {
                    echartData.push({
                        name: data.time_now,
                        Blood_oxy: data.Blood_oxygen,
                        blood_pre: data.blood_pressure,
                        Respiratoryrate: data.Respiratory_rate,
                        heartrate: data.heart_rate,
                        tem: data.temperature

                    });


                    if (echartData.length > 8) {
                        echartData.shift();
                    }


                    xAxisData = echartData.map(v => v.name);
                    yAxisData1 = echartData.map(v => v.Blood_oxy);
                    yAxisData2 = echartData.map(v => v.blood_pre);
                    yAxisData3 = echartData.map(v => v.Respiratoryrate);
                    yAxisData4 = echartData.map(v => v.heartrate);
                    yAxisData5 = echartData.map(v => v.tem);

                    option.xAxis[0].data = xAxisData;
                    option.series[0].data = yAxisData1;
                    option.series[1].data = yAxisData2;
                    option.series[2].data = yAxisData3;
                    option.series[3].data = yAxisData4;
                    option.series[4].data = yAxisData5;

                    echartsRecords.setOption(option);

                    $(function () {

                        <!--                        if (data.Blood_oxygen==0 || data.blood_pressure==0 || data.Respiratory_rate==0 || data.heart_rate==0 || data.temperature==0) {-->
                        <!--                            alert("无法连接到体征数据，请检查体征设备连接状况")-->
                        <!--                        }-->
                        <!--                        if (data.Blood_oxygen>100){-->
                        <!--                            alert("血氧浓度过高！请注意！！")-->
                        <!--                        }-->
                        <!--                        else if (data.Blood_oxygen<94){-->
                        <!--                            alert("血氧浓度过低！请注意！！")-->
                        <!--                        }-->
                        <!--                        if (data.blood_pressure>115){-->
                        <!--                            alert("血压过高！请注意！！")-->
                        <!--                        }-->
                        <!--                        else if (data.blood_pressure<90){-->
                        <!--                            alert("血压过低！请注意！！")-->
                        <!--                        }-->
                        <!--                        if (data.Respiratory_rate>26){-->
                        <!--                            alert("呼吸频率过高！请注意！！")-->
                        <!--                        }-->
                        <!--                        else if (data.Respiratory_rate<16){-->
                        <!--                            alert("呼吸频率过低！请注意！！")-->
                        <!--                        }-->
                        <!--                        if (data.heart_rate>180){-->
                        <!--                            alert("心率过高！请注意！！")-->
                        <!--                        }-->
                        <!--                        else if (data.heart_rate<30){-->
                        <!--                            alert("心率过低！请注意！！")-->
                        <!--                        }-->
                        <!--                        if (data.temperature>39.2){-->
                        <!--                            alert("体温过高！请注意！！")-->
                        <!--                        }-->
                        <!--                        else if (data.temperature<30){-->
                        <!--                            alert("体温过低！请注意！！")-->
                        <!--                        }-->

                    });


                },
                error: function (xhr, type, errorThrown) {
                    popup.failure("api错误");
                }
            })


        }

    });
</script>
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var chartDom = document.getElementById('echarts-records1');
        var myChart = echarts.init(chartDom);
        var option;

        const colors = ['#5470C6', '#91CC75'];
        option = {
            color: colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                right: '20%'
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data: ['普通人数', '重点人数']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    // prettier-ignore
                    data: ['一监区', '二监区', '三监区', '四监区', '五监区', '六监区', '七监区']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '人数',
                    position: 'left',
                    alignTicks: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 人'
                    }
                }
            ],
            series: [
                {
                    name: '普通人数',
                    type: 'bar',
                    yAxisIndex: 0,
                    data: [
                        4, 6, 3, 9, 7, 5, 10, 26, 9, 5, 10, 6
                    ]
                },
                {
                    name: '重点人数',
                    type: 'bar',
                    yAxisIndex: 0,
                    data: [
                        5, 16, 7, 9, 7, 8, 13, 31, 10, 7, 12, 6
                    ]
                },

            ]
        };

        option && myChart.setOption(option);

    });
</script>
<script>
    new Vue({
        el: '#app',
        data: {
            tableHei: 'auto',
            timer: null,
            size: 0,
            stopSign: true, // 判断定时器是否停止标识
            stepTime: null, // 改为全局定时器
        },
        mounted() {
            const that = this;
            // 增加浏览器激活状态判断。非激活状态为onblur
            window.onfocus = function (e) {
                const tableBox = that.$refs.tableBox;
                const sT = tableBox.scrollTop;
                console.log("激活状态！")
                if (!that.stopSign) {
                    tableBox.scrollTop = Math.round(sT / 50) * 50;
                    clearInterval(that.stepTime);
                }
            }
            this.getTable();
        },
        methods: {
            getTable() {
                const outHei = this.$refs.tableoOut.clientHeight - 60;
                this.size = Math.floor(outHei / 50);
                this.tableHei = this.size * 50 + 'px';
                this.scrolls();
            },
            stepScroll() {
                const that = this;
                const step = 50;
                let num = 0;
                const tableBox = this.$refs.tableBox;
                // 改为全局定时器，且在调用前先进行清空
                clearInterval(this.stepTime);
                this.stepTime = setInterval(function () {
                    that.stopSign = false;
                    num += 2;
                    if (num > step) {
                        num = 0;
                        clearInterval(that.stepTime);
                        that.stopSign = true;
                    } else {
                        tableBox.scrollTop += 2;
                    }
                }, 1000 / 60);
            },
            scrolls() {
                const that = this;
                const tableBox = this.$refs.tableBox;
                const tableInner = this.$refs.tableInner;
                clearInterval(this.timer);
                this.timer = setInterval(function () {
                    // 修改定时器结束判断条件
                    if (tableBox.scrollTop >= tableInner.scrollHeight) {
                        tableBox.scrollTop = 0;
                    }
                    that.stepScroll();
                }, 2000);
            },
        }
    })
</script>
</body>
</html>